<template>
  <div class="category">
    <el-card>
      <h1>审核订单</h1>

      <!-- 搜索栏 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="grid-content ep-bg-purple" />
          <el-input
            v-model="search"
            clearable
            placeholder="输入用户名、订单id、类型、状态"
            size="large"
          />
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
          <el-button type="primary" class="search">搜索</el-button>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <!-- 刷新 -->
          <el-button
            type="primary"
            class="refresh"
            @click="refresh"
            :disabled="loading"
          >
            <el-icon class="is-loading" v-if="loading" style="font-size: 18px">
              <Loading />
            </el-icon>
            <i
              class="iconfont icon-shuaxin"
              v-if="!loading"
              style="font-size: 18px"
            ></i>
          </el-button>
        </el-col>
      </el-row>
      <el-divider> </el-divider>
      <!-- 订单表格 -->
      <el-table
        :data="filterTableData"
        style="width: 100%"
        highlight-current-row
        empty-text
        table-layout="fixed"
        max-height="600"
      >
        <!-- 展开 -->
        <el-table-column type="expand" fixed>
          <template #default="porps">
            <!-- 内容 -->
            <el-descriptions
              title="订单详情"
              border
              style="padding: 20px 50px"
              column="2"
              colspan="4"
            >
              <el-descriptions-item label="订单编号">
                <el-tag>{{
                  porps.row.id || "空"
                }}</el-tag></el-descriptions-item
              >
              <el-descriptions-item label="下单时间">{{
                porps.row.createTime || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="用户名称">{{
                porps.row.addressUser ? porps.row.addressUser.name : "空"
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                porps.row.addressUser ? porps.row.addressUser.tel : "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="类别">{{
                porps.row.category || "空"
              }}</el-descriptions-item>
              <el-descriptions-item label="重量">{{
                porps.row.orderHaving || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="地址">
                <el-tag size="small">{{
                  porps.row.addressUser
                    ? porps.row.addressUser.addressDetail
                    : "空"
                }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="上门时间">{{
                porps.row.appointmentTime || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="备注">{{
                porps.row.remark || "空"
              }}</el-descriptions-item>
            </el-descriptions>

            <!-- 图片 -->

            <div class="demo-image__preview" style="padding: 10px 50px">
              <h2>图片</h2>
              <el-image
                v-for="(src, index) in srcList"
                :key="index"
                @click="initialIndexClick(index)"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="src"
                :zoom-rate="1.2"
                :preview-src-list="srcList"
                :initial-index="initialIndex"
                fit="cover"
                lazy
                preview-teleported="true"
                hide-on-click-modal="true"
              />
            </div>
            <!-- 进度条 -->
            <el-steps
              :active="porps.row.ordersStatus"
              align-center
              style="padding: 10px 0; margin-bottom: 20px"
              process-status="wait "
              finish-status="success"
            >
              <el-step title="审核中" description="已下单，审核中" />
              <el-step title="已审核" description="已审核，等待完成订单" />
              <el-step
                v-if="porps.row.ordersStatus == 3"
                title="未通过"
                description="订单被驳回，可能是订单不符合"
                status="error"
              />
              <el-step
                v-if="porps.row.ordersStatus !== 3"
                title="已完成"
                description="订单已完成"
              />
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column fixed prop="id" label="订单编号" width="220">
          <template #default="scope">
            <el-tag>{{ scope.row.id || "空" }}</el-tag>
          </template></el-table-column
        >
        <el-table-column prop="addressUser" label="用户名称">
          <template #default="scope">
            <el-tag>{{
              scope.row.addressUser ? scope.row.addressUser.name : "空"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="addressUser" label="联系电话">
          <template #default="scope">
            {{ scope.row.addressUser ? scope.row.addressUser.tel : "空" }}
          </template>
        </el-table-column>

        <el-table-column prop="category" label="类别">
          <template #default="scope">
            {{ scope.row.category || "空" }}
          </template>
        </el-table-column>

        <el-table-column prop="appointmentTime" label="上门时间">
          <template #default="scope">
            {{ scope.row.appointmentTime || "空" }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="remark" label="备注">
          <template #default="scope">
            {{ scope.row.remark || "空" }}
          </template>
        </el-table-column>
        <el-table-column prop="ordersStatus" label="订单状态">
          <template #default="scope">
            <el-tag
              class="ml-2"
              type="warning"
              v-if="scope.row.ordersStatus === 1"
              >未审核</el-tag
            >
            <el-tag
              class="ml-2"
              type="success"
              v-else-if="scope.row.ordersStatus === 2"
              >已审核</el-tag
            >
            <el-tag
              class="ml-2"
              type="danger"
              v-else-if="scope.row.ordersStatus === 3"
              >未通过</el-tag
            >
            <el-tag
              class="ml-2"
              type="success"
              v-else-if="scope.row.ordersStatus === 4"
              >已完成</el-tag
            >
            <el-tag class="ml-2" type="info" v-else>无</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              type="success"
              @click.prevent="handleExamine(scope.row, 2)"
            >
              审核订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
// 订单管理
import { defineComponent, onMounted } from "vue";
import { computed, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "category",
  setup() {
    const store = useStore();
    const loading = ref(false);
    onMounted(async () => {
      let res = await store.dispatch("product/getOrderList"); //请求
      console.log(res);
      console.log(computed(() => store.getters["product/getReviewOrdersList"]));
    });
    // 搜索
    const search = ref("");
    // 检索
    const filterTableData = computed(() =>
      // 用户名、订单id、类型、状态
      computed(() => store.getters["product/getReviewOrdersList"]).value.filter(
        (data) =>
          !search.value ||
          String(data.userId)
            .toLowerCase()
            .includes(search.value.toLowerCase()) ||
          String(data.id).toLowerCase().includes(search.value.toLowerCase()) ||
          String(data.category)
            .toLowerCase()
            .includes(search.value.toLowerCase()) ||
          String(
            data.ordersStatus == 1
              ? "未审核"
              : data.ordersStatus == 2
              ? "已审核"
              : data.ordersStatus == 3
              ? "未通过"
              : data.ordersStatus == 4
              ? "已完成"
              : "无"
          ).includes(search.value)
      )
    );

    // 按钮
    const handleExamine = async (row, state) => {
      row.ordersStatus = state;
      let res = await store.dispatch("product/reviewOrders", row);
      console.log(res);
      if (res) {
        // console.log("成功");
      } else {
        // console.log("失败");
      }
    };
    // 刷新按钮
    const refresh = async () => {
      loading.value = true;
      let res = store.dispatch("product/refreshOrder");
      if (res) {
        // loading.value = false;
      }
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    };

    return {
      //数据总条数
      total: 0,
      filterTableData,
      search,
      handleExamine,
      refresh,
      loading
    };
  }
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
}

.search {
  height: 100%;
  padding: 0 30px;
  border-radius: 5px;
}
.refresh {
  height: 100%;

  border-radius: 10px;
}

/* 订单表格 */
.orderTable {
  height: 600px;
}
</style>
